<template>
  <div>
    <service-swiper :key="gameinfo.length">
      <service-swiper-item
        v-for="(data, index) in gameinfo"
        :key="data.id"
        @click="handleClick(index)"
      >
        <!-- swiper部分 -->
        <div :class="current == index ? 'boxshadow innera' : 'innera'">
          <div>
            <div
              :style="{ backgroundImage: 'url(' + data.randimg + ')' }"
            ></div>
            <p>
              {{ data.dtidname }}
              <span v-show="current == index ? true : false"></span>
            </p>
          </div>
        </div>
      </service-swiper-item>
    </service-swiper>
    <ul
      v-for="(item, index) in gameinfo"
      :key="item.id"
      v-show="current == index ? true : false"
    >
      <li>
        <p>
          {{ item.dtidname }} <span>{{ item.grading }}</span>
        </p>
        接单{{ item.total }}次
        <div v-html="item.desc"></div>
      </li>
      <li class="second">
        <p>
          评论 ({{ item.ordernum }}) <i>{{ item.speech_durtion }} </i>
        </p>
        <!-- 这里的评论找不到 -->
        <div><span>暂无评论</span></div>
      </li>
    </ul>
  </div>
</template>
<script>
import serviceSwiper from './service/ServiceSwiper.vue'
import serviceSwiperItem from './service/ServiceSwiperItem.vue'
import jsonp from 'jsonp'
export default {
  components: {
    serviceSwiper,
    serviceSwiperItem
  },
  methods: {
    handleClick (index) {
      this.current = index
      console.log(index, 1111)
    }
  },
  data () {
    return {
      gameinfo: [],
      current: '',
      id: 0
    }
  },
  created () {
    // getJson(
    //   'https://yapi.tuwan.com/Content/getContentApi/?id=95&callback=_jsonpda6n1ssnw3b',
    //   res => {
    //     // console.log(res) // this.datalist = res this.dyarr = res.dyarr //
    //     console.log(this.gameinfo, res)
    //     this.gameinfo = res.gameinfo
    //   }
    // )
    this.id = location.href.match(/id=(\d+)/)[1]

    jsonp(
      `https://yapi.tuwan.com/Content/getContentApi/?id=${this.id}&callback=_jsonpda6n1ssnw3b`,
      {},
      (err, res) => {
        if (res) {
          this.gameinfo = res.gameinfo
        } else {
          console.log(err)
        }
      }
    )
  }
}
</script>
<style lang="scss" scoped>
.swiper-slide {
  width: 120px;
  height: 85px;
  margin: 3px 10px;
  border-radius: 5px;
  .innera {
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 5px;
    div {
      border-radius: 5px;
      width: 100%;
      height: 70px;
      background-position: center;
      background-size: contain;
    }
  }
  p {
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    color: #f00;
    text-indent: 2px;
    position: relative;
    background: #fff;
    span {
      width: 12px;
      height: 12px;
      position: absolute;
      right: 0px;
      top: 3px;
      background: url('../../../public/icon.png');
      background-size: cover;
    }
  }
}
.boxshadow {
  box-shadow: 1px 0px 2px #bbb, 0px 1px 1px #bbb;
}
ul {
  background: #fff;
  padding: 8px;
  margin-top: 5px;
  li {
    width: 100%;
    font-size: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    p {
      border-left: 4px solid #f60;
      text-indent: 1em;
      color: #888;
      height: 18px;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 5px;
      position: relative;
      span {
        margin-left: 6px;
        padding: 2px 8px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        background: pink;
        border-radius: 5px;
      }
      i {
        position: absolute;
        right: 20px;
        top: 50%;
        font-style: normal;
        color: hotpink;
      }
    }
  }
  .second {
    height: 60px;
    margin-bottom: 100px;
    p {
      margin-top: 10px;
    }
    div {
      margin-top: 18px;
      width: 100%;
      height: 40px;
      text-align: center;
      span {
        padding: 5px 45px;
        background: #ddd;
        color: #888;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>
